<template>
   <div class="index-toIndex">
        <div class="container ">
            <div 
            class="item"
            v-for="item of list"
            :key="item.id"
            >
              <img :src="item.main_img_url" alt="" class="item-img">
              <h1>{{item.first_title}}</h1>
              <h2>{{item.second_title}}</h2>
              <h3><span>￥</span><span class="price">{{item.price}}</span></h3>
            </div>
           

        </div>
        
        
        
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'IndexToIndex',
  data () {
    return {
      msg: 'index',
      id:1,
      list:[]
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
    // console.log(this.baseUrl)
    this.getInfo()
    
  },
  methods: {
    getInfo(){
      
      axios.get(this.baseUrl+'product/to_index_product',
               )
      .then(this.getInfoSucc)
    },
    getInfoSucc(response){
      console.log(response)
      this.list = response.data
    }
  },
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
h1,h2
  letter-spacing 2px
  text-align center
  width  348px
  margin 38px auto 0 auto
  font-size 24px
h2
  margin-top 15px
  font-size 16px  
h3
  margin-top 20px
  font-size 16px  
  text-align center
.price
  font-size 30px  
img 
    width 100%
.index-toIndex

.container
  container()  
  display flex
  flex-wrap wrap
  .item
    width 382px
    height 500px
    background #f0f1f2    
    margin 21px auto
    overflow hidden
    transition all 0.3s

.item-img
  display block
  width 348px
  height 264px
  background red
  margin 16px auto 0 auto
.item:hover
  background #149daf
  box-shadow 0 0 10px #737373  
.item:hover>h1,.item:hover>h2,.item:hover>h3
  color white  
</style>
